<template>
  <div>
    <!-- 顶部栏（HTML写法） -->
    <!-- <div class="vsoc">
      <div></div>
    </div> -->
    <!-- 顶部栏（el写法） -->
    <topCom />
    <!-- 内容区 -->
    <div class="big">
      <!-- 组件通信 -->
      <div class="app">
        <h1>组件通信</h1>
        <!-- 父子通信 -->
        <div>
          <h2>父子通信</h2>
          <childCom
            ref="childCom"
            :msg="input"
            @sendChild="recieveChilds"
            @sendCrazyChild="recieveCrazyChild"

          />
          <span style="display: inline">我是父组件：</span>
          <el-input
            style="width: 200px; margin-right: 10px"
            v-model="input"
            placeholder="请输入内容"
            clearable
          ></el-input>
          <el-button type="primary" @click="handle">提交</el-button>
        </div>
        <!-- 兄弟通信 -->·
        <div>
          <h2>兄弟通信</h2>
          <broCom
              @brosendChild="recieveBro"
          />
        </div>
      </div>

      <!-- 复用组件 -->
      <div class="app">
        <h1>复用组件</h1>
        <tableCom></tableCom>
        <span style="color: #bfbfbf; font-size: 14px"
          >⚠️这里有个bug，因为是使用了name作为唯一标识，没有考虑到唯一标识符的key值是不会被改变的，所以name的值是修改不成功的。</span
        >
      </div>

      <!-- 字段展示 -->
      <div class="app">
        <h1>字段展示</h1>
        <h2>“子品牌展示”</h2>
        <typeShowOne />
        <hr />
        <h2>“是否判断”</h2>
        <TypeShowTwo />
      </div>
    </div>
    <!-- 底部信息 -->
    <div class="dsoc">
      <div>
        <p></p>
      </div>
    </div>
  </div>
</template>

<script>
import childCom from './components/child.vue'
import broCom from './components/bro.vue'
import tableCom from './components/table.vue'
import topCom from './components/top.vue'
import typeShowOne from './views/typeShow/typeShowOne.vue'
import TypeShowTwo from './views/typeShow/typeShowTwo.vue'

export default {
  name: 'App',
  components: {
    childCom,
    broCom,
    tableCom,
    typeShowOne,
    TypeShowTwo,
    topCom
  },
  data () {
    return {
      input: ''
      // file: './assets/【前端】一小时速通Vue3.pdf'
    }
  },
  methods: {
    handle () {},
    recieveChilds (payload) {
      console.log(payload)
      this.input = payload
    },
    recieveCrazyChild (payload) {
      console.log(payload)
      this.input = payload
    },
    recieveBro(payload) {
      this.$refs.childCom.receiveData(payload);
    }
  }
}
</script>

<style>
body {
  display: block;
  margin: 0px;
}
.dsoc {
  width: 100%;
  height: 200px;
  margin-top: 45px;
  background-color: #f5f5f5;
}
.big {
  background-color: #f5f5f5;
  box-shadow: 0px 0px 20px #888888;
  width: 900px;
  /* 版心居中 */
  margin: 72px auto;
  /* HTML顶部栏的时候要写上 */
  /* margin-top: 70px; */
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  scroll-margin-top: 70px;
}
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  border: 5px solid #409eff;
  /* box-shadow: 1px 1px 5px #888888; */
  padding: 20px;
  margin-bottom: 10px;
  width: 95%;
}
/* 或者使用 /deep/ */
.el-table_21_column_81 .el-table__cell /deep/ .cell {
  height: auto !important;
}

</style>
